//  车辆滞留统计
<template >
    <div class="bgcolor">
        <div class="ms-doc">
            <i class="icon iconfont icon-yanzhengma"></i>
            <!--  查询条件 -->
            <div class="vue_search ms-title" ref="search">
                <div class="ms-top" style="margin-left: 18px">
                    <div class="crumbs fl">
                        <el-breadcrumb separator="/">
                            <el-breadcrumb-item>
                                <i class="el-icon-menu"></i>    车辆滞留</el-breadcrumb-item>
                            <el-breadcrumb-item>车辆滞留汇总</el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>
                </div>
                <el-form :model="formInline" label-width="60px" class="demo-form-inline" style="margin-left: -9px;">
                    <el-form-item label="城市" prop="name" >
                        <el-select v-model="params.defCityVal" clearable filterable placeholder="试着搜索：北京市"  @change = 'selCityWay'>
                            <el-option   v-for="item in cityData":key="item.FLD_AREACODE" :label="item.FLD_NAME"   :value="item.FLD_AREACODE"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="公司" prop="name" >
                        <el-select v-model="params.delCompanyVal" clearable filterable placeholder="试着搜索：北京市"  @change = 'selCompanWay'>
                            <el-option   v-for="item in companyData":key="item.FLD_ID" :label="item.FLD_CORPORATE_NAME"   :value="item.FLD_ID"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="路线" prop="name" >
                        <el-select v-model="params.delRouteVal" clearable filterable placeholder="试着搜索：北京市" >
                            <el-option no-data-text="请选择城市"   v-for="item in routeData":key="item.FLD_BUS_LINE_ID" :label="item.FLD_BUS_LINE_NAME"   :value="item.FLD_BUS_LINE_ID" @change = 'selRouteWay'></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="时间" prop="name" label-width="60px">
                        <div  style="position: relative;" class="search-time2" >
                            <b class="md"></b>
                            <el-date-picker v-model="params.timeData"  type="date" placeholder="选择日期"  :picker-options="pickerOptions1"> </el-date-picker>
                        </div>
                    </el-form-item>
                    <div class="el-form-item"><a @click="listseachbtn" class="sm-row3">&nbsp;&nbsp;<el-button type="primary" style="">查 询</el-button></a></div>
                </el-form>
            </div>
            <div class="table-info">
                <!-- 列表 -->
                <div class="echarts">
                    <div class="title">交易</div>
                    <div class="echarts-info" :style="dataTable">
                        <div class="info"><div id="myChart" :style="{width: '100%', height: '100%'}"></div></div>
                        <div class="echarts-right">
                            <span class="row-1 row" v-for="data in sumData"><i v-bind:style="{ background: data.background }"></i><b>{{data.name}}：{{data.num}}</b></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    const insurance = require( '../../../api/insurance');        //   接口js引用
    export default {
        data: () => ({
            // f6b37f
            colorArray:['#88c998','#f6b37f','rgb(246, 227, 127)','rgb(75, 120, 160)','rgb(178, 155, 246)','#fe6765','#04b754','#04b754'],
            cityData: [],        // 城市数据列表
            defCityValStu:true,
            companyData:[],     // 公司数据列表
            routeData: [],      // 路线数据列表
            // 时间插件数据
            pickerOptions1: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
            },
            dataTable:{'height':(document.body.clientHeight-280)-60+'px','width':'100%'},
            screenHeight: document.body.clientHeight,//减去header的60px
            screenWidth: document.body.clientWidth-200,//减去header的60px
            dataList:[],
            sumData:[],                     // 总数统计
            params:{
                defCityVal: undefined,     // 默认选中城市
                delCompanyVal:undefined,  // 公司默认选中
                delRouteVal:undefined,    // 默认选中路线
                timeData:'',
                serachTime:'123'
            },
            orderDataList:'',
            // 交易折线统计
            line: {
                tooltip : {
                    trigger: 'axis', // 触发类型，默认数据触发，见下图，可选为：'item' ¦ 'axis'
                    showDelay: 0,             // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
                    hideDelay: 500,            // 隐藏延迟，单位ms
                    backgroundColor: 'rgba(255, 255, 255, 0.74)',     // 提示背景颜色，默认为透明度为0.7的黑色rgba(1, 74, 111, 0.79)rgba(12, 100, 144, 0.7)
                    borderColor: '#333',       // 提示边框颜色
                    borderRadius: 4,           // 提示边框圆角，单位px，默认为4
                    borderWidth: 0,            // 提示边框线宽，单位px，默认为0（无边框）
                    padding: 15,                // 提示内边距，单位px，默认各方向内边距为5，
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'line',         // 默认为直线，可选为：'line' | 'shadow'
                        lineStyle : {          // 直线指示器样式设置
                            color: 'rgb(0, 128, 192)',
                            width: 1,
                            type: 'solid'
                        },
                        shadowStyle : {                       // 阴影指示器样式设置
                            width: 'auto',                   // 阴影大小
                            background:'rgb(0, 128, 192)',
                            color: 'rgba(6, 61, 88, 0.91)'  // 阴影颜色
                        }
                    },
                    toolbox: {
                        show : true,
                        feature: {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                            restore : {show: true},
                            saveAsImage : {show: true},
                        }
                    },
                    textStyle: {
                        color: '#272727'
                    },
                    formatter:function(params){
                        var name = '时间11：'+params[0].name + ':00:00 <br>';
                        var barName1 =  params[0].seriesName +' : '+params[0].value + '<br/>';
                        var barName2 =  params[1].seriesName +' : '+params[1].value + '<br/>';
                        var barName3 =  params[2].seriesName +' : '+params[2].value + '<br/>';
                        var barName4 =  params[3].seriesName +' : '+params[3].value + '<br/>';
                        var barName5 =  params[4].seriesName +' : '+params[4].value + '<br/>';
                        var barName6 =  params[5].seriesName +' : '+params[5].value + '<br/>';
                        var barName7 =  params[6].seriesName +' : '+params[6].value + '<br/>';
                        var barName = barName1+barName2+barName3+barName4+barName5+barName6+barName7;
                        var lineName = params[0].seriesName+'-'+params[1].seriesName+'-'+params[2].seriesName+'-'+params[3].seriesName+'-'+params[4].seriesName+'-'+params[5].seriesName+'-'+params[6].seriesName;
                        return name+barName
                    }
                },
                legend: {
                    data:['正常（没有故障）：336','Psam卡异常：889','未涉足运参卡：78','设备注册成功：888','银联签到失败：888','设备未授权：888','设备重复注册：888']
                },
                calculable : true,
                grid: {
                    top:'10px',
                    left: '0%',
                    right: '5%',
                    bottom: '0%',
                    containLabel: true
                },
                xAxis : [
                    {
                        axisLabel:{rotate:0, interval:0},       // 数据x轴旋转
                        axisLine:{lineStyle:{color:'#999'}},  // X 轴颜色
                        type : 'category',
                        boundaryGap : false,                   // 从0刻度开始
                        data : ['0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23'] // X 轴数据
                    }
                ],
                yAxis : [
                    {
                        axisLine:{lineStyle:{color:'#999'}}, // Y 轴颜色
                        type : 'value'
                    }
                ],
                series : []
            },
        }),
        watch:{ // 监听

        },
        methods:{
            drawLine(){
                // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('myChart'));
                this.pub(myChart);
                // 绘制图表
                myChart.setOption(this.line);
                window.onresize = function(){
                    myChart.resize();
                };
                myChart.on('click', function (params) {
                    console.log('点击');
                    console.log(params);
                });
            },

            pub(myChart){
                // console.log('--------');
                // console.log(myChart);
                // myChart.on('click', function (params) {
                //     console.log('点击');
                //     console.log(params);
                // });
            },
            // 订单统计列表
            pubLicListWap(){
                var that = this;
                var d = new Date(that.params.timeData);
                that.params.serachTime = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
                // that.line.tooltip.formatter.name =
                var startTime =  that.params.serachTime+ ' '+'00:00:00';
                var endTime = that.params.serachTime+' '+'23:00:00';

                var params = 'FLD_CTIYCODE='+that.params.defCityVal+'&FLD_COMPANYID='+that.params.delCompanyVal+'&FLD_BUSLINE='+that.params.delRouteVal+'&FLD_ERROR_CODE=0&FLD_STARTTIME='+startTime+'&FLD_ENDTIME='+endTime+
                    '&PAGEINDEX=1&PAGESIZE=10';
                that.sumData = [];
                that.line.series = [];
                $.ajax({
                    url:insurance.posturl+"PosData/GetPayFailListBySumPage?"+params,
                    type:"POST",
                    success:function(data){
                        if(data.status){
                            if(data.status){
                                if(data.data != ''){
                                    that.dataList = JSON.parse(data.data);
                                    for(var i = 0; i<that.dataList.length; i++){
                                        var lineData = {
                                            name:that.dataList[i].statname,
                                            type:'line',stack: '总量', itemStyle : { normal : { lineStyle:{  color:that.colorArray[i]} } }, symbol:'none',  smooth:0.5, data:that.dataList[i].statdata };
                                        var d = 0;
                                        for(var k = 0; k<that.dataList[i].statdata.length; k++){
                                            d += parseInt(that.dataList[i].statdata[k]);
                                        }
                                        that.sumData.push({'background':that.colorArray[i], 'name':that.dataList[i].statname,'num':d});
                                        that.line.series.push(lineData);
                                        that.drawLine();
                                    }
                                }else{
                                    that.dataList = null;
                                    that.totalRecord = 0;
                                }
                            }else{
                                that.$message.error(data.msg);
                                this.$router.push('/userlogin');
                            }
                        }else{
                            that.$message.error(data.msg);
                        }
                    },
                    error: function(jqXHR){
                        that.$message.error('发生错误'+jqXHR.status);
                    }
                });
            },
            // 查询
            listseachbtn(){
                this.pubLicListWap();
            },
            // -----------------------  获取数据 方法 ---------------------
            // 城市选择
            selCityWay(){
                if(this.params.defCityVal != '' || this.params.defCityVal != undefined){
                    this.getCompanyData(this.params.defCityVal);
                    if(this.defCityValStu){  // 第一次加载时调用
                        this.pubLicListWap();   // 获取列表信息
                    }
                }
                this.companyData = [];
                this.routeData = [];
                this.params.delCompanyVal = undefined;
                this.params.delRouteVal = undefined;
            },

            // 公司选择
            selCompanWay(){
                if(this.params.delCompanyVal != '' || this.params.delCompanyVal != undefined){
                    this.getRoteData(this.params.delCompanyVal);
                }
                this.routeData = [];
                this.params.delRouteVal = undefined;

            },
            // 获取城市列表
            getCityData(){
                var that = this;
                $.ajax({
                    url:insurance.posturl+"SysInfo/GetCityList?str=0",
                    type:"POST",
                    success:function(data){
                        if(data.status){
                            that.cityData = JSON.parse(data.data);
                            var userCity = localStorage.setItem('ms_usercity',data.data.FLD_FLEET_ID);
                            if(userCity != null || userCity != undefined){
                                that.params.defCityVal = localStorage.setItem('ms_usercity',data.data.FLD_FLEET_ID);
                            }else{
                                that.params.defCityVal = that.cityData[0].FLD_AREACODE;
                            }
                        }else{
                            that.$message.error(data.msg);
                        }
                    },
                    error: function(jqXHR){
                        that.$message.error('获取数据超时');
                    }
                });
            },

            // 获取公司 -- 根据城市id
            getCompanyData(citycod){
                var that = this;
                $.ajax({
                    url:insurance.posturl+"SysInfo/GetCompanyList?FLD_CITY_CODE="+citycod,
                    type:"POST",
                    success:function(data){
                        if(data.status){
                            that.companyData = JSON.parse(data.data);
                            //    that.params.delCompanyVal = that.companyData[0].FLD_ID;
                            //     that.params.delCompanyVal = '';
                        }else{
                            that.$message.error(data.msg);
                        }
                    },
                    error: function(jqXHR){
                        that.$message.error('获取数据超时');
                    }
                });
            },

            // 获取路线 -- 根据公司id
            getRoteData(compancod){
                var that = this;
                $.ajax({
                    url:insurance.posturl+"SysInfo/GetLineList?FLD_COMPANY_ID="+compancod,
                    type:"POST",
                    success:function(data){
                        if(data.status){
                            that.routeData = JSON.parse(data.data);
                            //   that.params.delRouteVal = that.routeData[0].FLD_BUS_LINE_ID;
                        }else{
                            that.$message.error(data.msg);
                        }
                    },
                    error: function(jqXHR){
                        that.$message.error('发生错误'+jqXHR.status);
                    }
                });
            },
        },
        mounted(){
            let myChart = this.$echarts.init(document.getElementById('myChart'));
            myChart.setOption(this.line);
            myChart.on('click', function (params) {
                console.log('点击');
                console.log(params);
            });
            const that = this;
            // 浏览器拖拽变化
            window.onresize = () => {
                myChart.resize();
                return (() => {
                    window.screenWidth = document.body.clientWidth
                    that.screenWidth = window.screenWidth;
                })()
            };
            // this.drawLine();
            var t = new Date;
            that.params.timeData =  new Date(t.getFullYear(), t.getMonth(), t.getDate()-7, t.getHours(), t.getMinutes());
            that.screenHeight = `${document.documentElement.clientHeight}`;
            that.dataTable = {'height':(that.screenHeight-280)-60+'px','width':'100%'};
            that.getCityData();     // 获取城市信息
        }
    }
</script>

<style src="../../../../static/css/datasource.css"></style>
<style src="../../../../static/css/common.css"></style>
<style src="../../../../static/css/main.css"></style>
<style scoped>
    .no-data {font-size: 50px; text-align: center;  margin: 50px;color: #d0d0d0;}
    .search-time2 {position: relative;}
    .search-time2 .el-icon-time{left: 0px !important;}
    .search-time2 .el-input__inner{padding-left:35px; padding-right: 0px;}
    .search-time2 .md{position: absolute;background: white;z-index: 999;width:25px;height: 80%;top: 2px;right: 8px;}
    .search-time2 .el-icon-date{left: 0px !important;}
    .el-input__icon{left: 0px !important;}
    i,b,em{ font-style: normal;font-weight: normal;}
    .echarts {position: relative; margin-top: 15px;}
    .echarts .title{ color: #333; font-size: 16px;}
    .echarts .echarts-info{margin-top:10px; background: #fff; padding: 10px 20px; padding-right: 250px; display: flex;}
    .echarts .echarts-info .info{flex: 1;}
    .echarts-right{min-width: 200px; margin-right:0px; background: #fff; z-index: 999; padding: 20px;}
    .echarts-right span{display: flex; overflow: hidden; margin: 10px 0px}
    .echarts-right span *{align-self: center;}
    .echarts-right span b{ color: #333333;float: left;font-weight: 400;}
    .echarts-right .row i{line-height: 40px; min-width: 15px; height: 15px; float:left; margin-right: 10px; }
    .echarts-right .row i{ border-radius: 50%; }
    .echarts-right .rows i{width: 18px; height:18px; float: left;margin-right: 10px; font-size: 15px;text-align: center; line-height: 18px;}
    .echarts-right .row-1 i{ background: #88c998;}
    .echarts-right .row-2 i{ background: #f6b37f;}
    .echarts-right .row-3 i{ background: #c391bf;}
     .echarts-right .row-4 i{ background: #f59b9e;}
     .echarts-right .row-11 i{ color: #0f73ce;}
     .echarts-right .row-22 i{ color: #04b754;}
     .echarts-right .row-33 i{ color: #b57bb0;}
     .echarts-right .row-44 i{ color: #fe6765;}
     .echarts-right .row-11 em{ color: #0f73ce;}
     .echarts-right .row-22 em{ color: #04b754;}
     .echarts-right .row-33 em{ color: #b57bb0;}
     .echarts-right .row-44 em{ color: #fe6765;}
    .input-data .el-input__inner{ width: 173px !important;}
</style>
